<template>
    <div id="app">
        <div class="top">
            <div class="container">
                <div class="text">小智</div>
            </div>
            小智学习
        </div>
        <div class="bot">
            <div class="left">
                <img src="@/assets/left.png"/>
            </div>
            <div class="loginRegister">
                <div class="bartype">
                    <div class="kong"></div>
                    <div class="loginType">
                        <router-link to="/login">登录</router-link>
                    </div>
                    <div class="registerType">
                        <router-link to="/register">注册</router-link>
                    </div>
                </div>
                <div class="conType">
                    <router-view></router-view>
                </div>
            </div>
            <div class="right">
                <img src="@/assets/right.png"/>
            </div>
        </div>
    </div>
</template>
<script>
export default {

    data() {
        return {
            right: "@/assets/right.png",
            left: "@/assets/left.png"
        };
    },
    mounted() {

    }
};
</script>
<style scoped>
.top {
    font-size: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 50px;
}

.bot {
    display: flex;
    justify-content: space-around;
}

.bot img {
    width: 500px;
}

.left {
    z-index: -1;
    position: absolute;
    left: 0;
    bottom: 0;
}

.right {
    z-index: -1;
    position: absolute;
    right: 0;
    bottom: 0;
}

.loginRegister {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    padding: 30px;
    margin-top: 50px;
    width: 600px;
}

.bartype {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 20px;
}

.bartype .loginType {
    display: flex;
    justify-content: center;
    flex: 1;
}

.bartype .registerType {
    display: flex;
    justify-content: center;
    flex: 1;
}

.kong {
    flex: 1;
}

span {
    padding: 5px 20px;
    border-radius: 5px;
    font-size: 16px;
}

.bartype a {
    padding: 10px;
    text-decoration: none;
    border-radius: 5%;
}

.bartype a.router-link-exact-active {
    background-color: orange;
    color: #fff;
}

.container {
    position: relative;
    perspective: 1000px;
    transform-style: preserve-3d;
    margin-right: 50px;
    width: 150px;
    height: 150px;
    animation: spin 2s infinite linear;
}

.container:hover .text {
    animation: rotate 1.5s linear infinite;
    transform-origin: center center;
    transform: translateZ(80px) rotateY(180deg);
    text-shadow: 0 0 5px #fff;
    transition: all 0.5s;
}

.text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 120px;
    height: 120px;
    background-color: #007bff;
    color: #fff;
    font-size: 48px;
    line-height: 120px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    transition: all 0.5s;
}

@keyframes rotate {
    0% {
        transform: translateZ(0) rotateY(0deg);
    }
    100% {
        transform: translateZ(0px) rotateY(360deg);
    }
}

@keyframes spin {
    0% {
        transform: translateZ(0) rotateY(0deg);
    }
    100% {
        transform: translateZ(0px) rotateY(360deg);
    }
}
</style>
